<!DOCTYPE html>
<html class="no-js" lang="zh_CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <title>${system_admin_title}</title>
    #required_css
    <style>
        #html table {
            width: auto;
        }

        .data-viewer{
            overflow: auto;
            max-height: 400px;
        }
    </style>
</head>

<body>#loading
<div class="app $!layout">
    <!-- 头部菜单 -->
    #header
    <section class="layout">
        <!-- 菜单 -->
        #sidebar
        <!-- 内容主体 -->
        <section class="container">
            <section class="main-content">
                <div class="content-wrap">
                    <div class="wrapper pt20">
                        <form id="biDatasourceAddForm" role="form" class="parsley-form" data-parsley-validate
                              action="$!basePath/bi/datasource/add/do" method="post">
                            <section class="panel">
                                <div class="panel-heading">
                                    <h5>配置</h5>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="control-label">数据库：</label>
                                                <select id="db" name="db" class="form-control">
                                                    <option value="local" selected>系统当前数据库</option>
                                                    #foreach($!obj in $!list)
                                                    <option value="$!obj.id">$!obj.name</option>
                                                    #end
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">数据源名称：</label>
                                                <input type="text" class="form-control" data-parsley-required="true"
                                                       name="name">
                                            </div>
                                            <div class="form-group">
                                                <div class="pull-right"><a class="text-link" href="javascript:;" id="addExcel" onclick="addExcel()">添加Excel</a><a class="ml10" href="javascript:;"
                                                                                                                                                                  onclick="addExcelHelp()">?</a></div>
                                                <label class="control-label">SQL：</label>
                                                <textarea id="sql" name="sqlCmd" rows="5" class="form-control"
                                                          data-parsley-required="true"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <div class="row p15">
                                                    <label class="control-label">参数列表：</label>
                                                    <table id="resolveTable"
                                                           class="table table-condensed bg-white">
                                                        <thead>
                                                        <tr>
                                                            <th>序号</th>
                                                            <th class="col-lg-4">参数名</th>
                                                            <th class="col-lg-2">方式</th>
                                                            <th class="col-lg-4">默认值</th>
                                                            <th></th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr class="hide">
                                                            <td>1</td>
                                                            <td>
                                                                <input type="text" name="field" class="form-control">
                                                            </td>
                                                            <td>
                                                                <select name="method" class="form-control">
                                                                    <option value="eq">等于</option>
                                                                    <option value="not eq">不等于</option>
                                                                    <option value="lt">小于</option>
                                                                    <option value="le">小于或等于</option>
                                                                    <option value="gt">大于</option>
                                                                    <option value="ge">大于或等于</option>
                                                                    <option value="like">包含</option>
                                                                    <option value="not like">不包含</option>
                                                                    <option value="startsWith">开始以</option>
                                                                    <option value="endsWith">结束以</option>
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <input type="text" name="defaultValue" class="form-control">
                                                            </td>
                                                            <td style="vertical-align: middle">
                                                                <button class="btn btn-default btn-xs"
                                                                        onclick="removeParamRow(this)">
                                                                    <i class="fa fa-close"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                    <button class="btn btn-default" onclick="addParamRow()" type="button">
                                                        增加参数
                                                    </button>
                                                </div>
                                            </div>
                                            <!--<div class="alert alert-warning">-->
                                                <!--SQL中添加参数的方式：格式：<strong>{#参数名#}</strong>，示例：select * from table where id = '{#ID#}'-->
                                            <!--</div>-->
                                            <button class="btn btn-primary" onclick="doPreviewData()" type="button">
                                                <i class="fa fa-eye"></i> 预览数据
                                            </button>
                                            <button id="ok" class="btn btn-primary btn-parsley" data-loading-text="正在保存...">
                                                <i class="fa fa-save"></i> 保存数据源
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </section>
                            <section class="panel">
                                <div class="panel-heading">
                                    数据预览
                                </div>
                                <div class="panel-body">
                                    <div class="nav-tabs-custom no-b">
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li class="active"><a href="#html" data-toggle="tab">HTML</a></li>
                                            <li><a href="#json" data-toggle="tab">JSON</a></li>
                                            <li><a href="#xml" data-toggle="tab">XML</a></li>
                                        </ul>
                                        <div class="tab-content data-viewer">
                                            <div class="tab-pane fade active in" id="html"></div>
                                            <div class="tab-pane fade" id="json"></div>
                                            <div class="tab-pane fade" id="xml">
                                                <xmp></xmp>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </form>
                    </div>
                </div>
                <a class="exit-offscreen"></a>
            </section>
        </section>
    </section>
</div>
</body>
<div id="excelHelp" class="hide">
    <h3>实现方式：</h3>
    <ul>
        <li>根据Excel的列信息生成表（列最好不要是中文）</li>
        <li>自动将Excel的数据导入表当中</li>
        <li>生成查询SQL语句，默认查询所有字段。可以在SQL编辑框中修改</li>
    </ul>
</div>
#required_js
<script type="text/javascript">
    ns.require([
        "/framework/js/form/form.js",
        "/framework/js/form/validator.js",
        "/framework/js/form/uploader.js"
    ]);
    var data = [], json, xml, html, keys = [];
    var params = [];
    ns.ready(function () {
        $("#biDatasourceAddForm").ajaxForm({
            beforeSubmit: function (arr, $form, options) {
                $form.find("#ok").button("loading");
            },
            success: function (data, statusText, xhr, $form) {
                if (data.success == true) {
                    ns.tip.toast.success("保存成功！");
                } else {
                    ns.tip.toast.error(data.message);
                }
                $form.find("#ok").button("reset");
            }
        });
    });

    //预览数据
    function doPreviewData() {
        var fields = [], methods=[], defaultValues = [];
        $("#resolveTable tbody>tr:not(.hide)").each(function (i, tr) {
            tr = $(tr);
            var field = tr.find("input[name='field']").val();
            var method = tr.find("select[name='method']").val();
            var def = tr.find("input[name='defaultValue']").val();
            fields.push(field);
            methods.push(method);
            defaultValues.push(def);
        });
        ns.view.showLoading();
        ns.post("$!basePath/bi/datasource/exec", {
            db: $("#db").val(),
            sql: $("#sql").val(),
            field: fields.toString(),
            method: methods.toString(),
            defaultValue: defaultValues.toLocaleString()
        }, function (success, response) {
            ns.view.closeLoading();
            if (success) {
                $("#html").html(response.html);
                $("#json").html(JSON.stringify(response.json));
                $("#xml xmp").html(response.xml);
            } else {
                ns.tip.error("SQL语句错误", response.error);
            }
        });
    }

    //增加行
    function addParamRow() {
        var tr = $("#resolveTable tbody>tr.hide").clone();
        tr.removeClass("hide");
        tr.find("input[name='field']").attr("data-parsley-required", true).attr("data-parsley-placement", "bottom");
        tr.find("td:first").text($("#resolveTable tbody>tr:not(.hide)").length + 1);
        $("#resolveTable tbody").append(tr);
    }

    //删除行
    function removeParamRow(obj) {
        $(obj).parents("tr").remove();
    }

    function addExcel() {
        ns.form.uploader.open({
            title: "添加Excel",
            filter: ".xls,.xlsx",
            success: function (path, name, files) {
                var bar = ns.view.showProgressbar("正在处理...");
                ns.post("$!basePath/bi/datasource/add/excel", {path: path}, function (success, data) {
                    bar.close();
                    if (success) {
                        $("#sql").val(data.sql);
                    } else {
                        ns.error(data.message);
                    }
                })
            }
        })
    }

    function addExcelHelp() {
        ns.alert($("#excelHelp").html());
    }
</script>
#loading_close
</html>
